<template>
  <view class="quick-action" @click="handleClick">
    <uni-icons :type="icon" class="icon" :color="color" size="30" />
    <text class="label">{{ text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: 'mic'
    },
    text: {
      type: String,
      default: '语音输入'
    },
    color: {
      type: String,
      default: '#7986CB'
    },
    bgColor: {
      type: String,
      default: 'linear-gradient(135deg, rgba(121,134,203,0.1) 0%, rgba(121,134,203,0.2) 100%)'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click') // Emit the 'click' event to the parent
    }
  }
}
</script>

<style scoped lang="scss">
  .quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: v-bind(bgColor);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(121,134,203,0.1);
    transition: all 0.2s ease;
    cursor: pointer;
    margin: 10px;
    border: 1px solid rgba(121,134,203,0.1);

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(121,134,203,0.2);
    background: linear-gradient(135deg, rgba(121,134,203,0.15) 0%, rgba(121,134,203,0.25) 100%);
  }

  &:active {
    transform: scale(0.96);
    background: linear-gradient(135deg, rgba(121,134,203,0.2) 0%, rgba(121,134,203,0.3) 100%);
  }

  .icon {
    margin-bottom: 6px;
    transition: color 0.2s ease; /* Smooth icon color change */
  }

  .label {
    font-size: 14px;
    font-weight: bold; /* Emphasized label */
    color: #333; /* Neutral text color */
    text-align: center;
    line-height: 1.2;
  }
}
</style>
